<template>
  <div class="details_box">
    <el-descriptions :column="5">
      <el-descriptions-item><el-button type="primary" :icon="DArrowLeft"
          @click="backList">返回</el-button></el-descriptions-item>
      <el-descriptions-item label="优惠券名称">{{
        route.query.newName
      }}</el-descriptions-item>
      <el-descriptions-item label="优惠券类型">{{
        route.query.newType
      }}</el-descriptions-item>
      <el-descriptions-item label="使用条件" v-if="publicItem.couponType === 'fullReduction'">{{
        `满${publicItem.amount}${publicItem.currencyDescription}减${publicItem.threshold}${publicItem.currencyDescription}`
      }}</el-descriptions-item>
      <el-descriptions-item label="使用条件" v-else>{{
        `满${publicItem.amount}美元可用`
      }}</el-descriptions-item>
      <el-descriptions-item label="发放站点ID：">
          <el-text>{{  publicItem.websiteId }}</el-text>
      </el-descriptions-item>

      <el-descriptions-item label="发放站点名称">
          <el-text>{{ publicItem.websiteName }}</el-text>
      </el-descriptions-item>

      <el-descriptions-item label="有效期">
        <el-text class="mx-1" v-if="!publicItem.longTerm"> {{ route.query.newStartDate }}至{{
          route.query.newStartDate
        }}</el-text>
        <el-text class="mx-1" v-else>长期有效</el-text>

      </el-descriptions-item>
      <el-descriptions-item label="当前状态">{{
        route.query.status
      }}</el-descriptions-item>
      <el-descriptions-item label="优惠码">{{
        publicItem.code
      }}</el-descriptions-item>
    </el-descriptions>
    <el-table :data="tableData" style="height: calc(100vh - 330px)" border>
      <el-table-column prop="orderCode" label="订单号" align="center" />
      <el-table-column prop="username" label="使用人账号" align="center" />
      <el-table-column prop="type" label="订单状态" align="center" />
      <el-table-column prop="discountAmount" align="center">
        <template #header="scope">
          优惠金额（{{ publicItem.currencyDescription }}）
        </template>
      </el-table-column>
      <el-table-column prop="time" label="使用时间" align="center" />
      <el-table-column prop="orderAmount" align="center">
        <template #header="scope">
          订单金额（{{ publicItem.currencyDescription }}）
        </template>
      </el-table-column>
    </el-table>

    <Pagination :total="total" :page="searchFrom.pageNum" :limit="searchFrom.pageSize"
      @pagination="handleCurrentChange">
    </Pagination>
  </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted } from "vue";
import { DArrowLeft } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const { order_status } = proxy.useDict("order_status");
const route = useRoute();
const router = useRouter();
const publicItem = ref({}); //赋值对象
const total = ref(0);
const tableData = ref([]);
const siteList = ref([]);
const searchFrom = ref({
  pageNum: 1,
  pageSize: 20,
  param: {
    couponId: null,
  },
});
onMounted(() => {
  getSite()//获取站点
  getCondition();
});
const getDetails = () => {
  site.SiteCoupon.getById({
    pathParams: {
      id: route.query.id,
    },
  }).then((res) => {
    res.data = {
      ...res.data,
      websiteId: res.data.websiteIds[0],
      websiteName: siteList.value.find(e => e.id === res.data.websiteIds[0])?.name ,
    };
    publicItem.value = res.data;
  });
};
const getCondition = () => {
  searchFrom.value.param.couponId = Number(route.query.id);
  site.SiteCoupon.getOrderList({
    data: searchFrom.value,
  }).then((res) => {
    total.value = res.total;
    if (res.data?.length) {
      res.data = res.data.map((e) => {
        return {
          ...e,
          type: order_status.value.find((code) => code.value === e.orderStatus)
            ?.label,
          time: proxy.DateTime(e.useTime),
        };
      });
    }
    tableData.value = res.data;
  });
};



const backList = () => {
  router.back();
};
const handleCurrentChange = (newPage) => {
  searchFrom.value.pageNum = newPage.page;
  searchFrom.value.pageSize = newPage.limit;
  getList();
};
const getSite = () => {
  site.general
    .sitewebsiteList({
      data: {
        pageNum: 1,
        pageSize: 999,
        param: {}
      },
    })
    .then((res) => {
      getDetails();
      siteList.value = res.data
    })
}
</script>
<style lang="scss" scoped></style>
